﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<meta name="renderer" content="webkit" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<link rel="shortcut icon" href="/favicon.ico" />
	<title>Socket连接测试</title>
	<link rel="stylesheet" href="//cdn.virens.cn/plugins/layui/css/layui.css" />
	<link rel="stylesheet" href="//cdn.virens.cn/plugins/fontawesome/css/fontawesome-all.min.css" />
	<link rel="stylesheet/less" type="text/css" href="/assets/css/portal/socket.less" />
	<script src="//cdn.bootcss.com/less.js/3.0.1/less.min.js"></script>
</head>

<body>
	<div class="layui-container">
		<div class="socket-body">
			<div class="message-scroll">
				<div class="message-list" id="message-list"></div>
			</div>
			<div class="tool" id="message-tool"></div>
			<form class="layui-form layui-form-pane">
				<div class="layui-form-item" pane>
					<div class="layui-input-block">
						<input type="text" name="content" class="layui-input" id="message-input" placeholder="请输入消息内容" autocomplete="off">
					</div>
					<button class="layui-btn layui-form-label" id="message-btn" lay-filter="formDemo" lay-submit disabled>立即发送</button>
				</div>
			</form>
		</div>
	</div>

	<script src="//cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
	<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="//cdn.virens.cn/plugins/layui/layui.js"></script>
	<script src="//cdn.virens.cn/js/ajax.js"></script>
	<script>
		layui.use(['laytpl', 'laydate', 'layer', 'form'], function () {
			var _btn = $('#message-btn');
			var _list = $('#message-list');
			var _input = $('#message-input');
			var _scroll = $('.message-scroll');
			var _websocket = new WebSocket("ws://localhost:8080/socket");

			// 绑定连接监听事件
			_websocket.addEventListener('open', (e) => {
				console.log("Connection open ...");
			});
			_websocket.addEventListener('close', (e) => {
				console.log("Connection closed.");
				console.log(e);
			});
			_websocket.addEventListener("error", function (event) {
				console.error(event);
			});
			_websocket.addEventListener("message", (event) => {
				console.log("Received Message: " + event.data);
			});

			// 绑定连接逻辑处理事件
			_websocket.addEventListener('open', (e) => {
				_btn.prop('disabled', false);
			});
			_websocket.addEventListener('close', (e) => {
				_btn.prop('disabled', true);
			});
			_websocket.addEventListener("message", (event) => {
				var json = JSON.parse(event.data);

				if (json.success) {
					layui.laytpl($('#message-tpl').html()).render(json, function (html) {
						_list.append(html);
						_scroll.scrollTop(_list.outerHeight());
					});
				} else {
					console.error('接收到的数据有误：');
				}
			});

			// 绑定表单提交事件
			layui.form.on('submit(formDemo)', function (data) {
				var content = _input.val();

				if (_websocket.readyState != WebSocket.OPEN) {
					console.log('连接未建立');
				} else if (content === '') {
					console.log('未输入内容');
				} else {
					_input.val('');
					_websocket.send(JSON.stringify({
						'sign': 'ddddddd',
						'content': content
					}));
				}

				return false;
			});
		});
	</script>
	<script type="text/html" id="message-tpl">
		<div class="message {{d.self?'right':'left'}}">
			<div class="message-info">
				<img class="message-icon" src="{{d.icon}}">
				<div class="message-name">{{d.name}}</div>
				<div class="message-sentime">{{d.createTime}}</div>
			</div>
			<div class="message-content">{{d.content}}</div>
		</div>
	</script>
</body>

</html>